<template>
  <div class="box">
    <div class="search">
      <div class="items">
        <el-input
          type="text"
          placeholder="客户编号"
          v-model="custID"
        ></el-input>
        <el-button class="el-icon-search" type="success" @click="search(custID)">搜索</el-button>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%" height="400">
      <el-table-column prop="custID" label="客户编号" width="150">
      </el-table-column>
      <el-table-column prop="cname" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="phone" label="联系方式" width="120">
      </el-table-column>

      <el-table-column prop="address" label="地址"> </el-table-column>

      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row.custID)"
            type="danger"
            icon="el-icon-delete"
          ></el-button>
          <el-button
            type="primary"
            @click="tolink(scope.row.custID)"
            icon="el-icon-edit"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="new">
      <el-button
        type="success"
        plain
        icon="el-icon-circle-plus-outline"
        @click="addNew"
        >新增客户</el-button
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  methods: {
    handleClick(id) {
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            url: "http://localhost:3000/deletC",
            method: "post",
            data: qs.stringify({
              id: id,
            }),
          })
          this.$message({
            type: "success",
            message: "删除成功!",
          });
         location.reload()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
        
    },
    tolink(id) {
      this.$router.push({ path: "editCustomer", query: { i: id } });
    },
    addNew() {
      this.$router.push("/addCustomer");
    },
    search(id){
      axios({
        url:'http://localhost:3000/searchC',
        method:'post',
        data:qs.stringify({
          id:id
        })
      }).then((success)=>{
        this.tableData=success.data[0]
      })
    }
  },

  data() {
    return {
      tableData: [{}],
      custID: "",
    };
  },
  mounted() {
    axios({
      url: "http://localhost:3000/customer",
      method: "get",
    }).then((succ) => {
      this.tableData = succ.data;
    });
  },
};
</script>
<style  scoped>
.box {
  overflow: auto;
}
.search {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.items {
  display: flex;
  width: 300px;
}
</style>